<template>
  <div>
    <div class="head">
      <div class="sign1" @click="tz">Roam</div>
      <div class="sign2" @click="tz">Touring</div>
      <div class="dhl">
        <div class="sxj" @click="sxjD">
          <i class="el-icon-s-promotion"></i>筛选景点
        </div>
        <div class="sxf" @click="sxfA">
          <i class="el-icon-s-management"></i>筛选旅游方案
        </div>
      </div>
      <i class="el-icon-user icon1" @click="$router.push('/start/LoginView')" v-if="this.userId == -1"></i>
      <div class="tx" @mouseenter="showYclE" @mouseleave="hideYclE"
        :style="{ backgroundImage: 'url(' + this.txUrl + ')' }" v-else>
        <i class="el-icon-user-solid mrt" v-if="this.txUrl == ''"></i>
        <div class="ycl">
          <div class="txNc">
            <div class="txK" :style="{ backgroundImage: 'url(' + this.txUrl + ')' }"><i class="el-icon-user-solid mrt1"
                v-if="this.txUrl == ''"></i></div>
            <div class="zNc">{{ userName }}</div>
          </div>
          <div class="grZ" @click="qgR">
            <i class="el-icon-user icon2"></i>个人中心
          </div>
          <div class="grZ" @click="qsZ">
            <i class="el-icon-setting icon2"></i>修改信息
          </div>
          <div class="grZ" @click="exit">
            <i class="el-icon-s-home icon2"></i>退出登录
          </div>
        </div>
      </div>
    </div>
    <router-view @childEvent="handChildEvent"></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: 0,
      userName: "",
      txUrl: "", //头像的url
      timeoutId: null,
      previousE: null,
      paramN: "",
    };
  },
  methods: {
    tz() {
      if (this.previousE != null) {
        this.previousE.style.color = "white";
      }
      if (this.paramN == "homePage") return;
      else this.$router.push(`/home/homePage/${this.userId}`);
    },
    sxjD() {
      if (this.userId == -1)
        this.$notify.info({
          title: "消息",
          message: "您还未登录请点击右上角头像进行操作",
        });
      else {
        if (this.previousE != null) {
          this.previousE.style.color = "white";
        }
        document.querySelector(".sxj").style.color = "pink";
        if (this.$route.name != "selectScene")
          this.$router.push(`/home/selectScene/${this.userId}`);
        this.previousE = document.querySelector(".sxj");
      }
    },
    sxfA() {
      if (this.userId == -1)
        this.$notify.info({
          title: "消息",
          message: "您还未登录请点击右上角头像进行操作",
        });
      else {
        if (this.previousE != null) {
          this.previousE.style.color = "white";
        }
        document.querySelector(".sxf").style.color = "pink";
        if (this.$route.name != "selectScene")
          this.$router.push(`/home/selectScene/${this.userId}`);
        this.previousE = document.querySelector(".sxf");
      }
    },
    handChildEvent(data) {
      const { param1, param2, param3, param4 } = data;
      this.userId = param1;
      this.txUrl = param2;
      this.paramN = param3;
      this.userName = param4;
    },
    showYclE() {
      clearTimeout(this.timeoutId);
      document.querySelector(".ycl").style.visibility = "visible";
    },
    hideYclE() {
      this.timeoutId = setTimeout(() => {
        document.querySelector(".ycl").style.visibility = "hidden";
      }, 500);
    },
    qgR() {
      if (this.$route.name != "userPage")
        this.$router.push(`/home/userPage/${this.userId}`);
      if (this.previousE != null) {
        this.previousE.style.color = "white";
      }
    },
    qsZ() {
      if (this.$route.name != "settingPage")
        this.$router.push(`/home/settingPage/${this.userId}`);
      if (this.previousE != null) {
        this.previousE.style.color = "white";
      }
    },
    exit() {
      this.$confirm("此操作将退出您当前账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.localStorage.removeItem('JWT_TOKEN')
          this.$message({
            showClose: true,
            type: "success",
            message: "退出成功!",
          });
          if (this.paramN != "homePage") {
            sessionStorage.clear();
            this.$router.push(`/home/homePage/-1`);
            if (this.previousE != null) this.previousE.style.color = "white";
          } else {
            if (this.previousE != null) this.previousE.style.color = "white";
            this.userId = -1;
            if (this.$route.path != "/home/homePage/-1")
              this.$router.replace("/home/homePage/-1");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
            showClose: true,
          });
        });
    },
  },
};
</script>
<style scoped>
.head {
  user-select: none;
  position: relative;
  width: 100%;
  height: 50px;
  background-color: rgba(74, 82, 89);
  z-index: 1;
}

.head .sign1 {
  position: absolute;
  left: 10%;
  top: 0%;
  height: 100%;
  width: 5%;
  line-height: 50px;
  text-align: end;
  font-size: 20px;
  color: pink;
}

.sign1:hover {
  cursor: pointer;
}

.head .sign2 {
  position: absolute;
  left: 15%;
  top: 0%;
  height: 100%;
  width: 7%;
  line-height: 50px;
  text-align: start;
  font-size: 20px;
  color: white;
}

.sign2:hover {
  cursor: pointer;
}

.head .dhl {
  display: flex;
  position: absolute;
  left: 25%;
  top: 0%;
  height: 100%;
  width: 25%;
  justify-content: space-between;
  color: white;
  line-height: 50px;
}

.sxj {
  height: 100%;
  flex: 4;
  text-align: center;
}

.sxj:hover {
  cursor: pointer;
}

.sxf {
  height: 100%;
  flex: 6;
  text-align: center;
}

.sxf:hover {
  cursor: pointer;
}

.head .icon1 {
  position: absolute;
  right: 15%;
  top: 15%;
  height: 70%;
  width: 35px;
  line-height: 35px;
  text-align: center;
  color: white;
  border: 1px white solid;
  border-radius: 17.5px;
}

.head .icon1:hover {
  color: pink;
  border-color: pink;
  cursor: pointer;
}

.tx {
  position: absolute;
  right: 15%;
  top: 15%;
  height: 70%;
  width: 35px;
  border: 1px white solid;
  border-radius: 17.5px;
  color: white;
  background-size: 100% 100%;
}

.tx:hover {
  cursor: pointer;
}

.mrt {
  width: 100%;
  height: 100%;
  border-radius: 17.5px;
  line-height: 35px;
  text-align: center;
}

.ycl {
  overflow: hidden;
  position: absolute;
  left: 50%;
  top: 50px;
  width: 130px;
  height: 180px;
  margin-left: -65px;
  background-color: rgba(74, 82, 89, 0.9);
  border-radius: 5px;
  color: white;
  visibility: hidden;
}

.ycl:hover {
  cursor: pointer;
}

.txNc {
  position: relative;
  width: 100%;
  height: 28%;
}

.txK {
  position: absolute;
  left: 5%;
  top: 10%;
  height: 80%;
  width: 40px;
  background-size: 100% 100%;
  border-radius: 40px;
  border: 1px white solid;
}

.mrt1 {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  line-height: 40px;
  text-align: center;
}

.zNc {
  position: absolute;
  left: 45%;
  top: 0%;
  height: 100%;
  width: 55%;
  line-height: 50.5px;
  font-size: 12px;
}

.grZ {
  width: 100%;
  height: 15%;
  margin-top: 10px;
  line-height: 27px;
  font-size: 12px;
  padding-left: 20px;
}

.grZ:hover {
  color: pink;
}

.icon2 {
  display: inline-block;
  width: 15%;
}
</style>